<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #tit{
            width: 100%;
            height: 48px;
            background: pink;
            line-height: 48px;
            font-size: 26px;
            text-align: center;
        }
        #nav{
            display: flex;
        }
        #nav>li{
            list-style: none;
            flex: 1;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 20px;
        }
        #nav_list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        #nav_list>li{
            width: 48%;
            list-style: none;
            padding-top:10px ;
        }
        #nav_list>li>h4{
            width: 100%;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
        }
        #nav_list>li>p{
            width: 100%;
            font-size: 20px;
            color: red;
        }
        #nav_list>li>img{
            width: 100%;
        }
        .col{
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <cpn1></cpn1>
        <cpn2></cpn2>
        <cpn3></cpn3>
        <cpn4></cpn4>
    </div>
    <template id="tem1">
        <div>
            <p id="tit">购物车</p>
        </div>
    </template>
    <template id="tem2">
        <div>
            <ul id="nav">
                <li v-for="(item,index) in nav" @click="navClick(index)" :class="ind == index?'col':''">{{item}}</li>
            </ul>
        </div>
    </template>
    <template id="tem3">
        <div>
            <ul id="nav_list">
                <li v-for="(item,index) in list[i]">
                    <img :src="item.show.img">
                    <h4>{{item.title}}</h4>
                    <p>￥{{item.price}}</p>
                </li>
            </ul>
        </div>
    </template>
    <template id="tem4">
        <div>
            
        </div>
    </template>
    <script src="./a1.js"></script>
    <script src="./b1.js"></script>
    <script src="./c1.js"></script>
    <script type="module">
        import Bus from './1.js'
        let app = new Vue({
            el:"#app",
            components:{
                cpn1:{
                    template:"#tem1",
                },
                cpn2:{
                    template:"#tem2",
                    data(){
                        return{
                            nav:["流行","新款","精选"],
                            ind:1
                        }
                    },
                    methods: {
                        navClick(i){
                            this.ind = i;
                            Bus.$emit("get",i)
                        }
                    },
                },
                cpn3:{
                    template:"#tem3",
                    props:{
                        parent:Number
                    },
                    data(){
                        return{
                            list:[pop.data.list,sell.data.list,news.data.list],
                            i:1
                        }
                    },
                    created() {
                        Bus.$on("get",(index)=>[
                            this.i = index
                        ])
                    },
                },
                cpn4:{
                    template:"#tem4",
                },
            }
        })
    </script>
</body>
</html>